<template>
	<view class="infobox">
		<comtarbar class="comtarbar">
			<!-- <template #right>
				<view v-if="user.isFriend" class="delete" @tap="deleteFriend(user)"><image src="../../static/images/common/delete.svg" mode="widthFix"></image></view>
			</template> -->
			<template #right>
				<view class="info" @tap="goZoom"><image src="../../static/images/common/zoom.png" mode="widthFix"></image></view>
			</template>
		</comtarbar>
		<view class="bg"><image :src="user.avatars" mode="aspectFill"></image></view>
		<!-- 以下.bg是测试时使用 -->
		<!-- <view class="bg"><image src="../../static/images/img/four.png" mode="aspectFill"></image></view> -->
		<view class="mask"></view>
		<view class="imgbox" :class="isShow ? 'boxshadow' : ''" :animation="animationData2">
			<image :src="user.avatars" mode="aspectFill"></image>
			<!-- 测试时使用 -->
			<!-- <image src="../../static/images/img/four.png" mode="aspectFill"></image> -->
		</view>
		<view class="content">
			<!-- <view class="name">叶萌</view> -->
			<view class="name">{{ user.name }}</view>
			<view class="sex">
				<view class="sexbox girl" v-if="user.sex == '女'"><image src="../../static/images/userhome/female.png" mode=""></image></view>
				<view class="sexbox boy" v-else><image src="../../static/images/userhome/male.png" mode=""></image></view>
			</view>
			<view class="nickname" v-show="user.nickName" @tap="showNick">备注：{{ nickName }}</view>
			<view class="nickname">{{ user.birthday }}</view>
			<view class="nickname">{{ user.address }}</view>
			<view class="signature">{{ user.signature }}</view>
		</view>
		<view class="btn" v-if="user.isFriend" @tap="goChat(user._id)">发送信息</view>
		<view class="btn" v-else @tap="show">加为好友</view>
		<view class="decoration"></view>
		<view class="draw" :animation="animationData">
			<view class="name">{{ user.name }}</view>
			<view class="msg"><textarea v-model="note" placeholder="请输入文字" maxlength="50" /></view>
			<view class="btnbox">
				<view class="cannel" @tap="show">取消</view>
				<view class="send" @tap="sendDemand">发送</view>
			</view>
		</view>
		<view class="drawer" :animation="animationData3">
			<view class="mask"></view>
			<view class="modifybox">
				<view class="close">
					<view class="m_title">修改备注</view>
					<view class="close_box" @tap="showNick"><image src="../../static/images/common/close.svg" mode="widthFix"></image></view>
				</view>
				<view class="nick_input"><input type="text" v-model="nickName" placeholder="请输入备注" /></view>
				<view class="nick_btn"><view class="btn_text" @tap="changeNick(user._id)">确定</view></view>
			</view>
		</view>
	</view>
</template>

<script>
import comtarbar from '../../components/comtarbar/comtarbar.vue';
import request from '../../api/request.js';
export default {
	data() {
		return {
			animationData: {},
			animationData2: {},
			animationData3: {},
			isShow: false,
			drawHieght: 0,
			note: '',
			sex: 'nv',
			id: '',
			user: {},
			isFriend: true,
			showInput: true,
			nickName: '',
			isNick: false,
			scrWidth: 0
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.getInfo();
	},
	onReady() {
		this.getHeight();
	},
	methods: {
		show() {
			this.isShow = !this.isShow;
			var animation = uni.createAnimation({
				duration: 400,
				timingFunction: 'ease'
			});
			var animation2 = uni.createAnimation({
				duration: 400,
				timingFunction: 'ease'
			});
			if (this.isShow) {
				animation.bottom(0).step();
				animation2
					.width(120)
					.height(120)
					.step();
			} else {
				animation.bottom(-this.drawHieght).step();
				animation2
					.width(175)
					.height(175)
					.step();
			}
			this.animationData = animation.export();
			this.animationData2 = animation2.export();
		},
		// 修改备注的drawer
		showNick() {
			this.isNick = !this.isNick;
			var animation = uni.createAnimation({
				duration: 400,
				timingFunction: 'ease'
			});
			if (this.isNick) {
				animation.right(0).step();
			} else {
				animation.right(-this.scrWidth).step();
			}
			this.animationData3 = animation.export();
		},

		//获取元素的高度
		getHeight() {
			const query = uni.createSelectorQuery().in(this);
			query
				.select('.draw')
				.boundingClientRect(data => {
					this.drawHieght = data.height;
				})
				.exec();
			// 屏幕宽度
			query
				.select('.infobox')
				.boundingClientRect(data => {
					this.scrWidth = data.width;
				})
				.exec();
		},
		// 获取用户信息
		async getInfo() {
			let result = await request({
				url: '/user/info',
				data: {
					id: this.id,
					token: uni.getStorageSync('token')
				}
			});
			this.user = result[1].data.user;
			if (this.user.nickName) {
				this.nickName = this.user.nickName;
			}
		},

		// 发送好友请求
		async sendDemand() {
			let res = await request({
				url: '/friend/addition',
				data: {
					id: this.id,
					token: uni.getStorageSync('token'),
					note: this.note
				},
				method: 'POST'
			});
			let answer = res[1].data;
			if (answer.status) {
				uni.showToast({
					title: answer.msg,
					duration: 2000
				});
				setTimeout(this.show, 2100);
				this.$store.dispatch('sendDemand', this.id);
			} else {
				uni.showToast({
					title: answer.msg,
					icon: 'none',
					duration: 2000
				});
			}
		},
		// 修改备注
		async changeNick(id) {
			let res = await request({
				url: '/friend/modify',
				data: {
					token: uni.getStorageSync('token'),
					nickName: this.nickName,
					id
				},
				method: 'POST'
			});
			let result = res[1].data;
			if (result.status) {
				uni.showToast({
					title: result.msg,
					duration: 1000
				});
				this.showNick(), this.getInfo();
				this.$store.dispatch('getFriends');
			} else {
				uni.showToast({
					title: result.msg,
					icon: 'none',
					duration: 1000
				});
			}
		},

		// 删除好友
		async deleteFriend(user) {
			uni.showModal({
				title: '提示',
				content: '确定删除该好友吗？',
				success: async res => {
					if (res.confirm) {
						let result = await request({
							url: '/friend/delete',
							data: {
								id: user._id,
								token: uni.getStorageSync('token')
							},
							method: 'POST'
						});
						let delRes = result[1].data;
						if (delRes.status) {
							uni.showToast({
								title: delRes.msg,
								duration: 2000
							});
						} else {
							uni.showToast({
								title: delRes.msg,
								icon: 'none',
								duration: 2000
							});
						}

						this.$store.dispatch('getFriends');
						// console.log(this.id,user)
					} else if (res.cancel) {
					}
				}
			});
		},

		// 聊天页
		goChat(id) {
			uni.navigateTo({
				url: '../chat/chat?id=' + id + '&&type=private'
			});
		},
		goZoom() {
			uni.navigateTo({
				url: '../dynamic/individual/individual?id=' + this.id
			});
		}
	},
	components: {
		comtarbar
	}
};
</script>

<style lang="scss" scoped>
@import '../../commons/css/mycss.scss';
.info {
	margin-left: 30rpx;
	margin-top: 8rpx;
}
.infobox {
	.delete {
		margin-top: 18rpx;
		width: 50rpx;
		height: 50rpx;
		opacity: 0.4;
		image {
			height: 100%;
			width: 100%;
		}
	}
	position: relative;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	.bg {
		position: absolute;
		z-index: 1;
		top: 0;
		right: 0;
		width: 100vw;
		height: 100vh;
		filter: blur(20rpx);
		image {
			width: 100%;
			height: 100%;
		}
	}
	.mask {
		position: absolute;
		z-index: 2;
		top: 0;
		right: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(255, 255, 255, 0.3);
	}
	.imgbox {
		position: absolute;
		top: 236rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 5;
		width: 350rpx;
		height: 350rpx;
		box-sizing: border-box;
		border: 4rpx solid white;
		border-radius: 50%;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.content {
		position: absolute;
		top: calc(236rpx + 398rpx);
		left: 50%;
		transform: translateX(-50%);
		z-index: 3;
		width: 552rpx;
		.name {
			color: #272832;
			font-size: 52rpx;
			text-align: center;
		}
		.sex {
			margin: 10rpx 0;
			display: flex;
			justify-content: center;
			.sexbox {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				image {
					width: 60%;
					height: 60%;
					margin: 20%;
				}
			}
			.girl {
				background: #ff5d5b;
			}
			.boy {
				background: #178fba;
			}
		}
		.nickname {
			margin-top: 20rpx;
			color: #272832;
			font-size: 32rpx;
			text-align: center;
		}

		.signature {
			margin-top: 20rpx;
			color: #272832;
			font-size: 30rpx;
			line-height: 50rpx;
			text-align: center;
		}
	}
	.btn {
		position: absolute;
		z-index: 3;
		left: 50%;
		bottom: 76rpx;
		transform: translateX(-50%);
		height: 80rpx;
		width: 684rpx;
		background: #ffe431;
		color: #272832;
		text-align: center;
		line-height: 80rpx;
		border-radius: 10rpx;
	}
	.decoration {
		position: absolute;
		z-index: 3;
		left: 50%;
		bottom: 18rpx;
		transform: translateX(-50%);
		width: 268rpx;
		height: 10rpx;
		background: rgba(0, 0, 0, 1);
		border-radius: 5rpx;
		opacity: 0.2;
	}
	.draw {
		height: calc(100vh - 350rpx);
		border-top-right-radius: 40rpx;
		border-top-left-radius: 40rpx;
		width: 100vw;
		background: white;
		position: absolute;
		z-index: 3;
		bottom: -100vh;
		left: 0;
		.name {
			color: #272832;
			font-size: 52rpx;
			margin: 0rpx 60rpx;
			margin-top: 160rpx;
			text-align: center;
		}
		.msg {
			background: rgba(243, 244, 246, 1);
			margin: 60rpx 60rpx;
			border-radius: 20rpx;
			padding: 20rpx;
			height: 50%;
			textarea {
				font-size: 32rpx;
				color: #272832;
			}
		}
		.btnbox {
			display: flex;
			margin: 0rpx 60rpx;
			height: 80rpx;
			width: calc(100vw - 120rpx);
			position: absolute;
			bottom: 40rpx;
			view {
				text-align: center;
				line-height: 80rpx;
			}
			.cannel {
				flex: 3;
				background: rgba(39, 40, 50, 0.1);
				border-radius: 5px;
			}
			.send {
				margin-left: 40rpx;
				flex: 7;
				background: rgba(255, 228, 49, 1);
				border-radius: 5px;
			}
		}
	}
}
.boxshadow {
	box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.5);
}
.drawer {
	width: 100vw;
	height: 100vh;
	z-index: 999;
	position: absolute;
	right: -100vw;
	.mask {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.2);
		z-index: 10;
	}
	.modifybox {
		border-radius: 10rpx;
		z-index: 12;
		width: 80%;
		height: 350rpx;
		background: white;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		.close {
			height: 88rpx;
			position: relative;
			.m_title {
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				border-bottom: 2rpx solid #e3e3e3;
			}
			.close_box {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				width: 50rpx;
				height: 50rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.nick_input {
			margin: 50rpx;
			text-align: center;
			font-size: 32rpx;
			border-radius: 5rpx;
			border: 2rpx solid #ccc;
			padding: 10rpx;
			// background: red;
			input {
				text-align: center;
			}
		}
		.nick_btn {
			margin-top: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.btn_text {
				border-radius: 10rpx;
				width: 120rpx;
				height: 70rpx;
				text-align: center;
				line-height: 70rpx;
				font-size: 30rpx;
				background: #5a9bec;
				color: white;
			}
		}
	}
}
</style>
